<template>
  <view class="browse-info">
    <view class="browse-info-left" @click="toCardAccessRecord">
      <view class="avatar-list">
        <template v-for="(v, i) in info?.avaList" :key="i">
          <view class="avatar-list-item" :style="{ transform: `translateX(-${15 * (i + 1)}rpx)` }">
            <TImage :src="v" vertical-align="baseline" width="48rpx" height="48rpx" error-img-type="person" />
          </view>
        </template>
      </view>
      <text
        class="browse-num"
        :style="{ marginLeft: info?.avaList && info.avaList?.length >= 3 ? '-20rpx' : '10rpx' }"
      >
        {{ info?.browseNum ?? 0 }}人浏览
      </text>
    </view>
    <view class="browse-info-right">
      <slot />
    </view>
  </view>
</template>

<script setup lang="ts">
  import { type BrowseInfo } from '@/api/card/types';
  import { type PropType } from 'vue';
  import TImage from '@/components/TImage/index.vue';
  import { navigateTo } from '@/router';
  import { ApplyTypeEnum } from '@/enums/membershipEnum';
  import { propTypes } from '@/utils/propTypes';
  import { LikeTypeEnum } from '@/enums/publicModuleEnum';
  import { useUserStoreWithOut } from '@/store/modules/user';

  const props = defineProps({
    info: Object as PropType<BrowseInfo>,
    /** 名片类型 */
    cardType: Number as PropType<ApplyTypeEnum>,
    /** cocId or leaderId */
    id: propTypes.number.def(0),
    /** 名片id */
    cardId: propTypes.number.def(0),
  });

  const { cocInfo } = useUserStoreWithOut();

  function toCardAccessRecord() {
    if (props.id == cocInfo.id && props.cardType == ApplyTypeEnum.PERSON) {
      navigateTo({
        name: 'cardAccessRecord',
        options: {
          type: LikeTypeEnum.PERSONCARD,
          sourceId: props.cardId,
        },
      });
    }
  }
</script>

<style lang="scss" scoped>
  .browse-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    &-left {
      display: flex;
      align-items: center;
      .avatar-list {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        transform: translateX(15rpx);
        &-item {
          width: 48rpx;
          height: 48rpx;
          border-radius: 50%;
          border: 1px solid #eee;
          flex-shrink: 0;
          overflow: hidden;
        }
      }
      .browse-num {
        color: #333;
        font-size: 23rpx;
      }
    }
    &-right {
      height: inherit;
    }
  }
</style>
